<template>
    <view class="h-[100vh] overflow-y-auto overflow-x-hidden">
        <up-navbar title="地址管理" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="p-[32rpx]">
            <SearchBar></SearchBar>
        </view>
        <view class="flex">
            <view class="w-[164rpx] bg-[#F1F2F4] shrink">
                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view @click="checkItem(index)" :class="current == index ? 'bg-[#FFF]' : ''" class="scroll-view-item" v-for="(item,index) in typeList">{{ item.name }}</view>
				</scroll-view>
            </view>
            <view class="flex-1">
                <view class="py-[24rpx] px-[46rpx] flex justify-between">
                    <view class="font-normal text-[28rpx] text-[#868686]">综合</view>
                    <view class="font-normal text-[28rpx] text-[#868686]">销量</view>
                    <view class="flex items-center">
                        <view class="font-normal text-[28rpx] text-[#868686]">价格</view>
                        <image src="../static/shangxia.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                    </view>
                </view>
                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view  class="scroll-view-item" v-for="(item,index) in list">
                        <proudct v-for="(item,index) in list" :key="index" :item="item" ></proudct>
                    </view>
				</scroll-view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import SearchBar from '@/components/SearchBar.vue'
import proudct from '@/components/proudct.vue'
import { GetGoodCategory, GetGoodPage } from '../../API/product'
const { goback, gohome } = useTab()
const { pageObj , checkItem , current , typeList, list ,GetList} = useList()
function useTab(){
    const goback = () => {
        uni.navigateBack()
    }
    const gohome = () => {
        uni.switchTab({
            url: '/pages/index/index'
        })
    }
    return {
        goback,
        gohome
    }
}
function useList(){
    const typeList = ref([])
    const list = ref([])
    const pageObj = reactive({
        pageNum:1,
        pageSize:10,
        categoryId:'',
        storeId:''
    })
    const current = ref(0)
    const GetList = async ()=>{
        let { rows } = await GetGoodCategory()
        typeList.value = rows
        let num = current.value
        list.value = typeList.value[num].children
        await GetOrderList()
    }
    const GetOrderList = async ()=>{
        let { rows } = await GetGoodPage(pageObj)
        list.value = rows
    }
    const checkItem = (item,index) => {
        current.value = index
        let num = index
        pageObj.categoryId = item.id
        list.value = typeList.value[num].children
    }
    return{
        typeList,
        list,
        GetList,
        current,
        checkItem,
        pageObj
    }
}
onLoad( async(options) => {
    if(options.current){
        current.value = options.current
    }
    pageObj.storeId = options.storeId ? options.storeId : ''
    await GetList()
})
</script>

<style lang="scss" scoped>
.scroll-Y{
    height: calc(100vh - 88px);
	.scroll-view-item {
        padding: 28rpx 0;
        font-weight: 400;
        font-size: 24rpx;
        color: #202020;
		text-align: center;
	}
}
</style>